<template>
  <div class="inAnalysisEcharts">
     <div class="table-box">
      <IconTitle title="基本信息" imgUrl="yunwei">
        <span class="slot">次数统计</span>
      </IconTitle>
      <div class="echarts-box">
        <el-row :gutter="10">
          <el-col :span="6"
            >
            <div class="echarts-item echarts-des">
              <div class="item-title">
                <i class="icon-ziliao"></i>
                <span>今日完成情况</span>
                <p>fault</p>

              </div>
              <el-row class="nowfinishedstatus">
                <el-col :span="12">
                  15/15 <label class="uint">次</label>
                </el-col>
                <el-col :span="12">
                  <el-progress :width="40" :stroke-width="2" color="#25C689" type="circle" :percentage="100"></el-progress>
                </el-col>
              </el-row>
            </div>
            <div class="echarts-item echarts-des">
              <div class="item-title">
                <i class="icon-ziliao"></i>
                <span>历史完成情况</span>
              </div>
              <el-row class="historyStatus">
                <el-col :span="12" class="year">
                  <p>今年</p>
                  <p>54<label class="uint">次数</label></p>
                </el-col>
                <el-col :span="12" class="total">
                  <p >总数</p>
                  <p>334<label class="uint">次</label></p>
                </el-col>
              </el-row>
            </div>
          </el-col>
          <el-col :span="8"
            >
            <div class="echarts-item">
              <div class="item-title">
                <i class="icon-ziliao"></i>
                <span>季度统计</span>
                <p>fault</p>
              </div>
            <div id="quarter-echart" style="width: 100%;height:330px;"></div>
            </div>
          </el-col>
          <el-col :span="10"
            >
            <div class="echarts-item week">
              <div class="item-title">
                <i class="icon-ziliao"></i>
                <span>周统计</span>
                <p>fault</p>
              </div>
              <el-row>
                <el-col :span="5" class="week-echart-left">
                  <div>
                    <p>完成数(次)</p>
                    <p>756</p>
                  </div>
                  <div>
                    <p>未完成数(次)</p>
                    <p>20</p>
                  </div>
                </el-col>
                <el-col :span="19">
                  <div id="week-echart" style="width: 100%;height:330px;"></div>
                </el-col>
              </el-row>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="table-box">
      <IconTitle title="基本信息" imgUrl="yunwei">
      </IconTitle>
      <div class="echarts-box">
        <el-row :gutter="10">
          <el-col :span="12"
          >
            <div class="echarts-item">
              <div class="item-title">
                <i class="icon-ziliao"></i>
                <span>任务完整情况</span>
                <p>fault</p>
              </div>
              <div id="task-finished-echart" style="width: 100%;height:330px;"></div>
            </div>
          </el-col>
          <el-col :span="12"
          >
            <div class="echarts-item">
              <div class="item-title">
                <i class="icon-ziliao"></i>
                <span>负责人完成情况</span>
                <p>fault</p>
              </div>
              <div id="manager-finished-echart" style="width: 100%;height:330px;"></div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    
  </div>
</template>
<script>
import IconTitle from "@/components/icon-title/index.vue";

export default {
  name: "equipment",
  components: {
      IconTitle
  },

  data() {
    return {
    
    };
  },
  created() {
   
  },
  mounted() {
    this.init()
  },
  methods: {
      init(){
        this.quarterEchartFun()
          this.weekEchartFun()
          this.taskFinishedEchartFun()
          this.managerFinishedEchartFun()
      },
      quarterEchartFun(){
          // 基于准备好的dom，初始化echarts实例
          var myChart = this.$echarts.init(document.getElementById('quarter-echart'));

          // 指定图表的配置项和数据
          var option = {
              tooltip: {
                  trigger: 'axis',
                  axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                      type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                  }
              },
           /*   legend: {
                  data: ['故障次数', '未保养次数']
              },*/
              grid: {
                  left: '3%',
                  right: '4%',
                  bottom: '3%',
                  containLabel: true
              },
              xAxis: {
                  type: 'value'
              },
              yAxis: {
                  type: 'category',
                  data: ['第一季度', '第二季度', '第三季度', '第四季度']
              },
              series: [
                  {
                      name: '故障次数',
                      itemStyle: {
                          color: '#5087EC'
                      },
                      type: 'bar',
                      stack: '总量',
                      label: {
                          show: true,
                          position: 'insideRight'
                      },
                      data: [320, 302, 301, 334]
                  },
                  {
                      itemStyle: {
                          color: '#E51C23'
                      },
                      name: '未保养次数',
                      type: 'bar',
                      stack: '总量',
                      label: {
                          show: true,
                          position: 'insideRight'
                      },
                      data: [120, 132, 101, 134]
                  }
              ]
          };

          // 使用刚指定的配置项和数据显示图表。
          option && myChart.setOption(option);
      },
      weekEchartFun(){
          // 基于准备好的dom，初始化echarts实例
          var myChart = this.$echarts.init(document.getElementById('week-echart'));

          // 指定图表的配置项和数据
          var option = {
              tooltip: {
                  trigger: 'axis',
                  axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                      type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                  }
              },
              xAxis: {
                  data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
              },
              yAxis: {},
              series: [
                  {
                      name: 'sales',
                      type: 'bar',
                      itemStyle: {
                          color: '#C67A78'
                      },
                      data: [5, 20, 36, 10, 10, 20, 80]
                  }
              ]
          };

          // 使用刚指定的配置项和数据显示图表。
          option && myChart.setOption(option);
      },
      taskFinishedEchartFun(){ //任务完成情况
          var myChart = this.$echarts.init(document.getElementById('task-finished-echart'));
          var option = {
              tooltip: {
                  trigger: 'axis',
                  axisPointer: {
                      type: 'shadow'
                  }
              },
              legend: {},
              grid: {
                  left: '3%',
                  right: '4%',
                  bottom: '3%',
                  containLabel: true
              },
              xAxis: {
                  type: 'category',
                  data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']

              },
              yAxis: {
                  type: 'value',
              },
              series: [
                  {
                      name: '任务数',
                      itemStyle: { color: '#5087EC'},
                      barGap: 0,
                      type: 'bar',
                      data: [18203, 23489, 29034, 104970, 131744, 630230, 18203, 23489, 29034, 104970, 131744, 630230]
                  },
                  {
                      name: '完成数',
                      itemStyle: { color: '#26AE61'},
                      barGap: 0,
                      type: 'bar',
                      data: [19325, 23438, 31000, 121594, 134141, 681807, 19325, 23438, 31000, 121594, 134141, 681807]
                  },
                  {
                      name: '未完成数',
                      itemStyle: { color: '#FE0202'},
                      barGap: 0,
                      type: 'bar',
                      data: [19325, 23438, 31000, 121594, 134141, 681807, 19325, 23438, 31000, 121594, 134141, 681807]
                  }
              ]
          };
          option && myChart.setOption(option);
      },
      managerFinishedEchartFun(){ // 负责人完成情况
          var myChart = this.$echarts.init(document.getElementById('manager-finished-echart'));
          var option = {
              tooltip: {
                  trigger: 'axis',
                  axisPointer: {
                      type: 'shadow'
                  }
              },
              legend: {},
              grid: {
                  left: '3%',
                  right: '4%',
                  bottom: '3%',
                  containLabel: true
              },
              xAxis: {
                  type: 'category',
                  data: ['王文', '钟无艳', '辛弃疾', '亚索', '李白']

              },
              yAxis: {
                  type: 'value',
              },
              series: [
                  {
                      name: '应检设备数',
                      itemStyle: { color: '#5087EC'},
                      barGap: 0,
                      type: 'bar',
                      data: [18203, 23489, 29034, 104970, 131744]
                  },
                  {
                      name: '已检设备数',
                      itemStyle: { color: '#26AE61'},
                      barGap: 0,
                      type: 'bar',
                      data: [19325, 23438, 31000, 121594, 134141]
                  },
                  {
                      name: '漏检设备数',
                      itemStyle: { color: '#FE0202'},
                      type: 'bar',
                      barGap: 0,
                      data: [19325, 23438, 31000, 121594, 134141]
                  },
                  {
                      name: '异常设备数',
                      itemStyle: { color: '#F2BD42'},
                      type: 'bar',
                      barGap: 0,
                      data: [19325, 23438, 31000, 121594, 134141]
                  }
              ]
          };
          option && myChart.setOption(option);
      }

  },
};
</script>
<style lang="scss">
.inAnalysisEcharts{
    .echarts-box {
      .echart-des{

      }
      .week{
        .week-echart-left{
          margin-top: 41px;
          font-size: 14px;
          color: #595454;
          p{
            font-weight: bold;
            margin: 4px 0;
          }
          div:nth-child(1){
            p:nth-child(2){
              color:#B47B81;
              font-size: 20px;
            }

          }
          div:nth-child(2){
            margin-top: 26px;
            p:nth-child(2){
              color:#333333;
              font-size: 20px;
            }
          }
        }
      }
    }
}

</style>
